<template>
    <div class="page">
        <x-header :left-options="{showBack: true,backText:'购买成功'}" class="headerBox"></x-header>
        <div class="buyResult">
            <x-icon type="ios-checkmark" size="100" class="icon-blue"></x-icon>
            <div class="buyState">购买成功</div>
            <div class="buyStated" @click="hreftwo()">点击返回</div>
        </div>
    </div>
</template>

<script>
    import {XHeader} from "vux";

    export default {
        components: {
            XHeader
        },

        methods: {
            hreftwo() {
                this.$router.push({name: 'index'})
            },
        }
    }
</script>

<style lang="less" scoped>
    .page {
        // 头部导航
        /deep/ .headerBox {
            background-color: #fff;
            border-bottom: 1px solid #eee;

            .vux-header-left {
                left: 24px;

                .vux-header-back {
                    color: #000;
                }

                .left-arrow:before {
                    border-color: #000;
                }
            }
        }

        .buyResult {
            margin-top: 25%;
            text-align: center;

            .icon-blue {
                fill: #679AFF;
            }

            .buyState {
                font-size: 44px;
                font-weight: 600;
            }

            .buyStated {
                margin-top: 60px;
                display: inline-block;
                font-size: 28px;
                background-color: rgb(110, 158, 255);
                border-radius: 40px;
                color: #fff;
                width: 450px;
                height: 80px;
                line-height: 80px;
            }
        }
    }
</style>